<template>
	<div>
		<div class="TopNextCom ">
			<!-- 介绍 -->
			<div class="RLname  flexRow">
				<div class="name">{{toptitle}}</div>
				<div class="more">更多</div>
			</div>


			<!-- 排行榜种类 -->
			<div class="rankCate flewCol" :style="{background: 'url('+ item.bgmurl +')'}" :key="index"
				v-for="(item,index) in topList">
				<div class="Rankname "> {{item.name}}</div>
				<!-- 榜单内排行歌曲 -->
				<songslist :id="item.id"></songslist>
				

			</div>
		</div>
		
		
	</div>
</template>

<script>
	import songslist from '../../../components/Rankinglist.vue'

	export default {
		props: {
			BgmUrl: {
				type: Array
			}
		},
		components:{
			songslist
		},
		name: "ranklist",
		data() {
			return {
				//榜单列表
				topList: [],
				toptitle:'',
				ToplistId:null
			}
		},
		created() {

		},
		mounted() {
			this.getTopList()
			
		},
		methods: {
			//榜单摘要
			async getTopList() {
				const {
					data: res
				} = await this.$http.get('/toplist')
				if (res.code !== 200) {
					this.$message.error('获取榜单失败')
				} else {
					// 榜单标题
					this.toptitle = res.artistToplist.name
					var list = []
					list = res.list.slice(0, 4)
					//将 内置数据背景图片添加 歌单数组中
					for (var i = 0; i < this.BgmUrl.length; i++) {
                         list[i].bgmurl = this.BgmUrl[i]
					}
					this.topList = list
					console.log(res)
				}

			}
		}
	}
</script>

<style>
	

	.Rankname {
		z-index: auto;
		width: 80px;
		height: 30px;
		margin: 10px auto 10px 18px;

		font-weight: 600;
		font-size: larger;
	}

	.rankCate {
		z-index: 10;
		height: 128px;

		margin: 15px auto;
		width: 347px;
		color: white;
		justify-content: space-between;

	}

	.name {
		font-size: larger;
		font-weight: 600;
	}

	.RLname {
		z-index: auto;
		width: 331px;
		height: 25px;
		margin: 5px auto;
		justify-content: space-between;
	}
</style>
